<template>
	<view>
		<view class="head-box posFixed zIndex999 w100">
			<view class="align-center">
				<view class="head-inp align-center posRelative"
					:style="{width:(isSearch || iscancel ? '600':'700'  )+ 'rpx'}">
					<image class="inp-img" src="../../static/images/fans/search.png" mode=""></image>
					<input confirm-type="search" @confirm="search" v-model="keyword" id="input" class="inp-val gray3"
						type="text" :placeholder="$t('shop').搜索单号商品名称" @focus.stop="getfocus" @blur.stop="loseblur"
						@input.stop="winput" :focus="isfocus">
					<view @click.stop="clearkey()" v-if="keyword!=''&& (isSearch || iscancel )"
						class="posAbsort rt0 top0 flex-col align-center justify-center plr10" style="height: 60rpx;">
						<image class="inp-img" src="../../static/images/mine/icon/delete.png" mode=""></image>
					</view>

				</view>
				<view class="ml10 red" v-if="isSearch && keyword!=''" @click="search()"><text>{{$t('common').搜索}}</text>
				</view>
				<view class="ml10" v-if="iscancel && keyword==''"><text>{{$t('common').取消}}</text></view>
			</view>

			<view class="tab-box align-center">
				<view class="tab-list" v-for="(m,n) in tabArr" :key="n" @click="tabBtn(m.id)">
					<view class="tab-text" :style="tabId==m.id?'color:#F44A42;':''">{{$t('common')[m.text]}}</view>
					<view class="tab-bor" v-if="tabId==m.id"></view>
				</view>
			</view>
		</view>

		<mescroll-body top='188' @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
			:down="downOption">
			<view class="scroll-box" style="padding-bottom: 32rpx;">
				<view class="list-box" v-for="(m,n) in orderList" :key="n"
					@click="navTo(`/pages/mine/order-detail?orderid=${m.id}`)">
					<view class="align-center justify-between">
						<view class="list-dh">{{$t('shop').订单号}}：{{m.order_sn}}</view>
						<view class="list-type" v-if="m.order_status==1">{{$t('common').待付款}}</view>
						<view class="list-type" v-if="m.order_status==2">{{$t('common').待发货}}</view>
						<view class="ft14" v-if="m.order_status==3">{{$t('common').已完成}}</view>

						<view class="ft14 gray6" v-if="m.order_status==4">
							{{$t('common').已取消}}
						</view>
					</view>
					<view class="list-good">
						<view class="good-box align-center">
							<image class="good-img"
								:src="m.cart_info.product.sku[0].image?m.cart_info.product.sku[0].image:m.cart_info.product.cover"
								mode="aspectFill"></image>
							<view class="good-right flex-col justify-between">
								<view class="good-name clamp2">{{m.good_name}}</view>
								<view class="good-gg gray9">{{$t('shop').规格}}：{{m.good_sku_name}}</view>
								<view class="align-center justify-between" style="margin-top: 30rpx;">
									<view class="good-price gray3">
										{{m.area==1?'':'$'}}{{parseFloat(m.good_price || 0)}}
									</view>

									<view class="good-num gray9">x{{m.good_num}}</view>
								</view>
							</view>
						</view>
					</view>

					<view class="list-news">
						<view class="align-center justify-between">
							<view class="align-center">
								<image class="list-n-img" :src="m.suppuser.avatar" mode=""></image>
								<view class="list-n-text gray3">{{m.suppuser.nickname}}</view>
							</view>
							<view class="list-price">
								{{$t('fan').合计}}：{{m.area==1?'':'$'}}{{parseFloat(m.total_price)}}
							</view>

						</view>
						<view class="align-center" style="margin-top: 12rpx;justify-content: end;">
							<view class="list-btn plr15 ptb5" style="border: 2rpx solid #2A2A2A;color: #2A2A2A;"
								v-if="m.order_status==1 || m.order_status==2&&((Date.parse(m.pay_time)+21600000)>(Date.now())) "
								@click.stop="qxShow(n)">
								{{$t('shop').取消订单}}
							</view>
							<!-- red bdRed -->
							<view class=" list-btn bd99 plr15 ptb5"
								@click.stop="navTo(`/pages/mine/logInfo?order_id=${m.id}&ems_company_name=${m.ems_company_name}&delivery_no=${m.delivery_no}`)"
								v-if="m.order_status==3">{{$t('shop').查看物流}}</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>

		<!-- 取消订单 -->
		<!-- 		<u-popup :show="qxpop" mode="center" round="10">
			<view class="qx-box">
				<view class="qx-text">{{$t('shop').确定要取消订单吗取消后不可恢复请谨慎}}</view>
				<view class="qx-bot align-center">
					<view class="qx-btn" @click="qxHide(1)">{{$t('common').确认}}</view>
					<view class="qx-btn" @click="qxHide(0)">{{$t('common').取消}}</view>
				</view>
			</view>
		</u-popup> -->
		<!-- 底部弹窗   是否是指默认密码 -->
		<view class="">
			<u-modal :showCancelButton="true" :confirmText="$t('common').取消" confirmColor="#333333"
				cancelColor="#333333" :cancelText="$t('common').确认" width="600rpx" :show="show"
				:content="$t('shop').确定要取消订单吗取消后不可恢复请谨慎" :closeOnClickOverlay="closeOnClickOverlay" @cancel="qxHide()"
				@close="cancel()" @confirm="cancel()"></u-modal>
		</view>
		<!-- 返回首页 -->
		<view @click="goindex()" class="bgWhite radius50 justify-center align-center posFixed zIndex999"
			style="width: 80rpx;height: 80rpx;box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(187,187,187,0.3); right: 24rpx;bottom: 40rpx;">
			<view class="ft10 gray9" style="width: 40rpx;"><text>{{$t('shop').返回首页}}</text></view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				show: false,
				closeOnClickOverlay: true,
				tabArr: [{
						id: '',
						text: "全部"
					},
					{
						id: 2,
						text: "待发货"
					},
					{
						id: 3,
						text: "已完成"
					},
					{
						id: 4,
						text: "已取消"
					}
				],
				tabId: '',
				qxpop: false,
				downOption: {
					auto: true
				},
				upOption: {
					auto: true,
					page: {
						num: 0,
						size: 20,
					},
					empty: {
						use: true,
						icon: '../../static/images/empty/wushangpin.png',
						tip: this.$t('common').暂无兑换记录,
						btnText: "",
						fixed: false,
						top: "100rpx",
						zIndex: 99
					},
					textNoMore: this.$t('common').已经到底了
				},
				orderList: [], //订单列表
				isSearch: false,
				iscancel: false,
				keyword: '', //搜索关键词
				isfocus: false, //获取焦点
				order_id: '',
				curreny: '', //币种
			}
		},

		onLoad() {
			this.$store.dispatch('getuserInfo')
			uni.setNavigationBarTitle({
				title: this.$t('shop').兑换记录
			})
			this.curreny = uni.getStorageSync('currency')
		},
		methods: {
			// 搜索框聚焦时
			getfocus() {
				console.log(this.keyword)
				if (this.keyword != '') {
					console.log(this.keyword != '')
					this.isSearch = true
				} else {
					this.iscancel = true
				}

			},
			// 失去焦点
			loseblur() {
				setTimeout(() => {
					this.isSearch = false
					this.iscancel = false
				}, 100)
			},
			// 键盘输入时
			winput(e) {
				this.keyword = e.detail.value
				if (this.keyword) {
					this.isSearch = true
					this.iscancel = false
				} else {
					this.isSearch = false
					this.iscancel = true
					// this.userorderlistAPI()
					this.mescroll && this.mescroll.resetUpScroll()
				}

			},
			clearkey() {
				this.isfocus = true
				this.iscancel = true
				this.keyword = ''
			},
			// 搜索商品
			search() {
				if (!this.keyword) {
					return this.$utils.msg(this.$t('shop').请输入搜索的单号商品名称)
				}
				// this.userorderlistAPI()
				this.mescroll && this.mescroll.resetUpScroll()
			},
			// async userorderlistAPI() {
			// 	const res = await this.$api.userorderlist({
			// 		page: page.num,
			// 		limit: page.size,
			// 		keyword: this.keyword,
			// 		order_status: ''
			// 	})
			// 	this.orderList = res.data.list
			// },
			// 下拉刷新
			upCallback(page) {
				if (page.num == 1) this.orderList = []; //如果是第一页需手动制空列表
				this.$api.userorderlist({
					page: page.num,
					limit: page.size,
					keyword: this.keyword,
					order_status: this.tabId
				}).then(res => {
					let curPageData = res.data.list; //当前页的数据列表
					let curPageLen = curPageData?.length; //当前页的数据长度
					let totalPage = parseInt(res.data.count / 20) + 1; //总页数
					let hasNext = page.num === totalPage? true : false //根据页数判断是否有下一页
					this.orderList = this.orderList.concat(curPageData); //追加新数据
					this.mescroll.endSuccess(curPageLen, hasNext);
				})
			},
			// tab点击
			tabBtn(val) {
				this.tabId = val
				this.$utils.debounce(() => {
					this.mescroll && this.mescroll.resetUpScroll()
				}, 500)
			},
			// 取消弹窗打开
			qxShow(n) {
				// this.qxpop = true;
				this.show = true
				this.order_id = this.orderList[n].id
			},
			cancel() {
				this.show = false
			},
			// 取消弹窗关闭
			async qxHide(val) {
				// if (val == 1) {

				// } else {
				// 	this.qxpop = false;
				// }
				const res = await this.$api.canceorder({
					order_id: this.order_id
				})
				if (res && res.code == 1) {
					this.$utils.msg(this.$t('shop').取消成功)
					// this.qxpop = false;
					this.show = false
					this.mescroll && this.mescroll.resetUpScroll()
				}
			},
			// 返回首页
			goindex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.head-box {
		padding: 14rpx 24rpx 0;
		background: #ffffff;

		.head-inp {
			// width: 100%;
			height: 60rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			background: #F5F5F5;
			border-radius: 100rpx;

			.inp-img {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}

			.inp-val {
				width: 500rpx;
				height: 60rpx;
				font-size: 28rpx;
			}
		}

		.tab-box {
			margin-top: 14rpx;

			.tab-list {
				width: 25%;
				height: 88rpx;
				background: #ffffff;
				position: relative;

				.tab-text {
					line-height: 88rpx;
					color: #2A2A2A;
					font-size: 32rpx;
					text-align: center;
				}

				.tab-bor {
					width: 60rpx;
					height: 4rpx;
					background: #F44A42;
					position: absolute;
					left: 50%;
					bottom: 10rpx;
					transform: translate(-50%, 0);
				}
			}
		}
	}

	.scroll-box {
		box-sizing: border-box;
		border: 2rpx;

		.list-box {
			margin-top: 24rpx;
			background: #ffffff;
			padding: 32rpx 24rpx 0;

			.list-dh {
				color: #2A2A2A;
				font-size: 28rpx;
			}

			.list-type {
				color: #F23C4B;
				font-size: 28rpx;
			}

			.list-good {
				padding: 24rpx 0;
				border-bottom: 2rpx solid #EEEEEE;

				.good-box {
					background: #ffffff;

					.good-img {
						width: 176rpx;
						height: 176rpx;
						border-radius: 10rpx;
					}

					.good-right {
						width: 526rpx;
						height: 176rpx;
						box-sizing: border-box;
						padding-left: 24rpx;

						.good-name {
							color: #2A2A2A;
							font-size: 28rpx;
							// font-weight: bold;
							margin-bottom: 12rpx;
						}

						.good-gg {
							font-size: 24rpx;
						}

						.good-price {
							color: #2A2A2A;
							font-size: 24rpx;
						}

						.good-num {
							font-size: 24rpx;
						}
					}
				}
			}

			.list-news {
				padding: 12rpx 0;

				.list-n-img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 100rpx;
					margin-right: 12rpx;
				}

				.list-n-text {
					font-size: 24rpx;
				}

				.list-price {
					color: #2A2A2A;
					font-size: 30rpx;
					font-weight: bold;
				}

				.list-btn {
					// width: 160rpx;
					// height: 50rpx;

					// font-size: 24rpx;
					text-align: center;
					// line-height: 50rpx;
					border-radius: 100rpx;

				}
			}
		}
	}

	.qx-box {
		width: 600rpx;
		height: 283rpx;
		background: #ffffff;
		border-radius: 10rpx;

		.qx-text {
			color: #2A2A2A;
			font-size: 30rpx;
			padding: 56rpx 40rpx;
			text-align: center;
		}

		.qx-bot {
			border-top: 2rpx solid #EEEEEE;

			.qx-btn {
				width: 50%;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: #2A2A2A;
				font-size: 30rpx;
			}
		}
	}
</style>